<template>
    <!-- 行政区管理 -->
    <div>
      <!-- 查询条件 -->
      <el-row type="flex" justify="space-between">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
          <el-form-item>
            <el-input
              placeholder="请输入行政区名称"
              v-model="searchForm.name"
              @keyup.enter.native="search"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="more-btns">
          <el-button type="primary" @click="editDetail(0,{})">新增</el-button>
        </div>
      </el-row>
      <!-- 数据列表 -->
      <el-table
        v-loading="loading"
        ref="videoTableList"
        :data="tableData"
        style="width: 100%">
        <el-table-column label="序号" prop="id" width="100"></el-table-column>
        <el-table-column label="图片" prop="url">
          <template slot-scope="scope"  v-if="scope.row.url!=''">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.url"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="行政区名称" prop="name"></el-table-column>
        <el-table-column label="所属消防大队" prop="belongsFireBrigade"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="editDetail(1,scope.row)" type="text" size="small">编辑</el-button>
            <span class="dividing-line">|</span>
            <el-button @click="deleteArea(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- 编辑 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="editTitle"
        width="600px"
        top='30vh'
        v-if="dialogEditInfo"
        :visible.sync="dialogEditInfo"
        @close="closeEditInfo"
        v-dialogDrag>
        <AreaManageBaseInfo :areaInfo="editAreaInfo"  :closeFun="closeEditInfo"></AreaManageBaseInfo>
      </el-dialog>
    </div>
</template>
<script>
import { getListAreaCountySet, deleteAreaCounty } from '@/api/sysConfig'
import AreaManageBaseInfo from './Dialog/AreaManageBaseInfo'
export default {
  name: 'AreaManage',
  // 引入子组件
  components: {
      AreaManageBaseInfo
  },
  data() {
      return {
        editTitle: "编辑",
        pageLoading: false,
        loading: false,
        dialogEditInfo: false,
        // 搜索条件
        searchForm: {
          queryType: 1,
          name: '',
        },
        // 列表数据
        tableData: [],
        // 分页
        currentPage: 1,
        pageSize: 10,
        total: 0,
        editAreaInfo: {}
      }
  },
  created() {//入口
    let that = this
    // 加载列表
    that.getTableData()
  },
  methods: {
    // 获取列表数据
    getTableData(pageIndex, pageSize) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        queryType: 1,
        name: that.searchForm.name.trim(),
        pageSize: that.pageSize,
        pageIndex: that.currentPage - 1
      }
      // 获取列表信息
      getListAreaCountySet(parames).then(res => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
    },
    search() {
      this.getTableData(1)
    },
    handleSizeChange(pageSize) {
      this.getTableData(1, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getTableData(currentPage)
    },
    // 删除
    deleteArea(row) {
      let that = this
      if (row) {
        that.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true
        }).then(() => {
          // 调用删除接口
          deleteAreaCounty({
            id: row.id
          }).then(res => {
            if( res.status === 200) {
              that.$message({
                type: 'success',
                message: '操作成功!'
              })
              // 刷新列表
              that.getTableData()
            }else{
              that.$message.error(res.info)
            }
          })
        }).catch(() => {
        })
      }
    },
    // 编辑
    editDetail(type,row) {
      let that = this
      if(type==0){
        that.editTitle = "新增"
      }else{
        this.editTitle = "编辑"
      }
      if(row) {
        that.editAreaInfo = row
        that.dialogEditInfo = true
      }
    },
    // 关闭编辑弹框
    closeEditInfo(flag) {
      let that = this
      that.dialogEditInfo = false
      if(flag) {
        this.getTableData(this.editAreaInfo.id?'':1)
      }
    },
  }

}
</script>
